<extend name="Public/base"/>
<block name="body">
    <link rel="stylesheet" href="/static/backend/css/report.css">

    <script src="__BACKEND_STATIC__/plugins/echarts/echarts.js"></script>
    <div class="page-crumb">
        <div class="ui-ctrl ui-crumb"><span class="ui-crumb-node ui-crumb-node-first ui-crumb-node-last">游戏报告</span></div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <input class="layui-input" name="begin" placeholder="请选择开始时间" value="{$data.begin}" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})" >
            </div>至
            <div class="layui-inline">
                <input class="layui-input" name="end" placeholder="请选择结束时间" value="{$data.end}" onclick="layui.laydate({elem: this, istime: true, format: 'YYYY-MM-DD'})" >
            </div>
            <button class="layui-btn layui-btn-min" lay-submit="" lay-filter="submit" id="ssss">　　确定　　</button>
        </div>
    </div>
    <div class="ui-nav-tab">
        <a class="nav-item state-active" href="/report/game" data-pjax>游戏报告</a>
    </div>
    <div class="layui-main">
        <div class="report-view">
            <div class="report-general">
                <ul class="general-detail">
                    <li class="general-detail-item general-detail-item-view">
                        <p class="general-detail-item-base">
                            <span class="general-detail-item-data" id="view"></span>
                        </p>
                        <p class="general-detail-item-name">展现量</p>
                    </li>

                    <li class="general-detail-item general-detail-item-click">
                        <p class="general-detail-item-base">
                            <span class="general-detail-item-data" id="click"></span>
                        </p>
                        <p class="general-detail-item-name">点击量</p>
                    </li>

                    <li class="general-detail-item general-detail-item-click-ratio">
                        <p class="general-detail-item-base">
                            <span class="general-detail-item-data" id="click_rate_sum"></span>
                        </p>
                        <p class="general-detail-item-name">点击率</p>
                    </li>

                </ul>
                <div class="ui-ctrl ui-crumb"><span class="ui-crumb-node ui-crumb-node-first ui-crumb-node-last">趋势图</span>

                </div>
            </div>
        </div>
    </div>

    <div id="main" style="width: 1673px;height:300px;">

    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">按广告投放筛选：</label>
        <div class="layui-input-inline">
            <select name="delivery_id" lay-verify="delivery_id" lay-filter="delivery_id" id="delivery_select">
                <option value="">请选择：</option>
                <foreach name="delivery" item="ret" key="k">
                    <option value="{$ret.id}">{$ret.delivery_name}</option>
                </foreach>
            </select>
        </div>

        <button class="layui-btn layui-btn-min" lay-submit="" lay-filter="submit" id="game_screen">　　确定　　</button>
    </div>
    <table class="layui-table list-content-table" lay-skin="nob">
        <colgroup>
            <col width="50">
            <col width="200">
            <col width="150">
            <col width="200">
            <col width="200">
            <col width="150">
            <col width="150">
            <col width="200">

            <col width="150">

        </colgroup>
        <thead class="list-table-head">
        <tr>
            <th class="ui-table-hcell">
                <div class="ui-table-hcell-text ui-table-hcell-text-first">

                </div>
            </th>
            <th class="ui-table-hcell">
                <div class="ui-table-hcell-text">广告投放名称</div>
            </th>
            <th class="ui-table-hcell">
                <div class="ui-table-hcell-text">广告投放ID</div>
            </th>
            <th class="ui-table-hcell">
                <div class="ui-table-hcell-text">数据来源</div>
            </th>
            <th class="ui-table-hcell">
                <div class="ui-table-hcell-text">试玩时间(秒)</div>
            </th>
            <th class="ui-table-hcell">
                <div class="ui-table-hcell-text">下载次数</div>
            </th>
            <th class="ui-table-hcell">
                <div class="ui-table-hcell-text">展现量</div>
            </th>
            <th class="ui-table-hcell">
                <div class="ui-table-hcell-text">点击量</div>
            </th>
            <th class="ui-table-hcell">
                <div class="ui-table-hcell-text">点击率</div>
            </th>

        </tr>
        </thead>

        <tbody class="list-table-body" id="each">

        </tbody>
    </table>

    <script>
        $(document).ready(function(){

            $.ajax({
                type:"get",
                url:'/Elastic/game_Statistics',
                dataType:"json",

                success: function(data){

                    if(data.status == '1') {
                        $("#view").text(data.data.view_sum);
                        $("#click").text(data.data.click_sum);
                        $("#click_rate_sum").text(data.data.click_rate_sum +='%');
                        var str = '';
                        $.each(data.data.delivery_list,function(index,item){
                            str += "<tr data-id="+ item.delivery_id +"><td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>  </div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>"+"<button class='layui-btn layui-btn-min btnEvent'>" +item.delivery_name + "</button></div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.delivery_id + "</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>dsp</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.play_time + "</div></td>";
                            if(typeof(item.has_download) == 'undefined'){
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + 0 + "</div></td>";
                            }else {
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.has_download + "</div></td>";
                            }
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.delivery_view + "</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.delivery_click + "</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.delivery_click_rate + "%</div></td></tr>";


                        });


                        $('#each').append(str);


                        showEchart(data.data);
                    } else {
                        console.log('没接收到返回数据');
                    }
                    return false;
                }
            });

        });

        $("#each").on('click', '.btnEvent',function(){
            var _this = $(this);
            var delivery_id = _this.parents('tr').attr('data-id');
            var begin =$(" input[ name='begin' ] ").val();
            var  end  =$(" input[ name='end' ] ").val();

            location.href ="/elastic/game_list.html?delivery_id=" + encodeURIComponent(delivery_id)+"&begin="+encodeURIComponent(begin)+"&end=" +encodeURIComponent(end);
        });

        $("#ssss").click(function () {
            var begin =$(" input[ name='begin' ] ").val();
            var  end  =$(" input[ name='end' ] ").val();

            $.ajax({
                type:"get",
                url:'/Elastic/game_Statistics',
                dataType:"json",
                data:{'begin':begin,'end':end},
                success: function(data){

                    if(data.status == '1') {

                        $("#view").text(data.data.view_sum);
                        $("#click").text(data.data.click_sum);
                        $("#click_rate_sum").text(data.data.click_rate_sum +='%');

                        var str = '';
                        $.each(data.data.delivery_list,function(index,item){

                            str += "<tr data-id="+ item.delivery_id +"><td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>  </div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>"+"<button class='layui-btn layui-btn-min btnEvent'>"  + item.delivery_name + "</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.delivery_id + "</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>dsp</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.play_time + "</div></td>";
                            if(typeof(item.has_download) == 'undefined'){
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + 0 + "</div></td>";
                            }else {
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.has_download + "</div></td>";
                            }


                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.delivery_view + "</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.delivery_click + "</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.delivery_click_rate + "%</div></td></tr>";



                        });
                        $('#each').empty();
                        $('#each').append(str);

                        showEchart(data.data);
                    } else {
                        console.log('没接收到返回数据');
                    }
                    return false;
                }
            });
        });

        $("#game_screen").click(function () {
            var begin =$(" input[ name='begin' ] ").val();
            var  end  =$(" input[ name='end' ] ").val();
            var  delivery_id =$("#delivery_select").val();


            $.ajax({
                type:"get",
                url:'/Elastic/game_Statistics',
                dataType:"json",
                data:{'begin':begin,'end':end,'delivery_id':delivery_id},
                success: function(data){

                    if(data.status == '1') {

                        var str = '';

                        $.each(data.data.delivery_list,function(index,item){
                            str += "<tr data-id="+ item.delivery_id +"><td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>  </div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>"+"<button class='layui-btn layui-btn-min btnEvent'>" + item.delivery_name + "</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.delivery_id + "</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>dsp</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.play_time + "</div></td>";
                            if(typeof(item.has_download) == 'undefined'){
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + 0 + "</div></td>";
                            }else {
                                str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.has_download + "</div></td>";
                            }
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.delivery_view + "</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.delivery_click + "</div></td>";
                            str += "<td class='ui-table-cell'>"+"<div class='ui-table-cell-text'>" + item.delivery_click_rate + "%</div></td></tr>";



                        });


                        $('#each').empty();
                        $('#each').append(str);


                        $("#view").text(data.data.view_sum);
                        $("#click").text(data.data.click_sum);
                        $("#click_rate_sum").text(data.data.click_rate_sum +='%');
                        showEchart(data.data);


                    } else {
                        console.log('没接收到返回数据');
                    }
                    return false;
                }
            });
        });



        function showEchart(data) {

            var myChart = echarts.init(document.getElementById('main'));

            option = {

                tooltip : {

                    trigger: 'axis'
                },

                legend: {

                    data:['展现量','点击量','点击率(%)']


                },

                toolbox: {

                    show : true,

                    feature : {

                        mark : {show: true},

                        dataView : {show: true, readOnly: false},

                        magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},

                        restore : {show: true},

                        saveAsImage : {show: true}

                    }

                },

                calculable : true,

                xAxis : [

                    {

                        type : 'category',

                        boundaryGap : false,

                        data:data.time

                    }

                ],

                yAxis : [

                    {

                        type : 'value',
                        splitLine:{
                            show:false
                        }

                    }

                ],

                series : [


                    {

                        name:'展现量',

                        type:'line',

                        smooth:true,

                        itemStyle: {
                            normal: {
                                color: '#40E0D0',
                                borderColor: 'rgba(64,224,208,0.27)',
                                borderWidth: 12

                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(64,224,208, 0.3)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(64,224,208, 0.3)'
                                }], false),
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 10
                            }
                        },

                        data:data.game_view

                    },

                    {

                        name:'点击量',

                        type:'line',

                        smooth:true,

                        itemStyle: {
                            normal: {
                                color: '#EE82EE',
                                borderColor: 'rgba(238,130,238,0.27)',
                                borderWidth: 12

                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(238, 130, 238, 0.3)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(238, 130, 238, 0.3)'
                                }], false),
                                shadowColor: 'rgba(238, 130, 238, 0.1)',
                                shadowBlur: 10
                            }
                        },


                        data:data.game_click

                    },
                    {

                        name:'点击率(%)',

                        type:'line',

                        smooth:true,

                        itemStyle: {
                            normal: {
                                color: '#FFD770',
                                borderColor: 'rgba(255,215,0,0.27)',
                                borderWidth: 12

                            }
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgba(255,215,0, 0.3)'
                                }, {
                                    offset: 0.8,
                                    color: 'rgba(255,215,0, 0.3)'
                                }], false),
                                shadowColor: 'rgba(255,215,0, 0.1)',
                                shadowBlur: 10
                            }
                        },


                        data:data.game_click_rate

                    }

                ]

            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    </script>
</block>


